<template>
  <div style="padding: 16px">
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        <el-col :span="16">
          <span> 财务全局概况 </span>
        </el-col>
        <el-col :span="8">
          <date
            v-model="valueTime"
            :type.sync="groupType"
            @handleChangeTime="handleChangeTime($event)"
          ></date>

          <!-- 自定义日期<el-date-picker
            key="daterange"
            v-model="rangeDate"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="{
              disabledDate: (time) =>
                !(
                  time.getTime() >= Date.now() - 365 * 8.64e7 &&
                  time.getTime() < Date.now() - 8.64e7
                ),
            }"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
            @change="getList"
            size="mini"
        /> -->
        </el-col>
      </div>
      <KoiCardIII :itemData="SaleProductdata" style="margin-bottom: 10px" />
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> 公司部门详情</span>
        <span>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportI"
            >导出</el-button
          >
        </span>
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade + " " }}年度完成率</span
                    > 
                  @pagination="getselectProductLevelAnalysis"
                  -->
      </div>
      <!-- <tableDataI :tableDataList="tableDataI" /> -->
      <el-table :data="tableDataI" @cell-click="tEdit">
        <!-- <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" /> -->
        <!-- <el-table-column label="原始ID" align="center" prop="originalId" /> -->
        <el-table-column label="申请部门" align="center" prop="appDept" />
        <!-- <el-table-column label="申请人" align="center" prop="applicantId" />
        <el-table-column label="申请日期" align="center" prop="appDate"> -->
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.appDate, '{y}-{m}-{d}') }}</span>
        </template> -->
        <!-- </el-table-column>
        <el-table-column label="是否归还" align="center" prop="isReturned" />
        <el-table-column
          label="最终是否归还"
          align="center"
          prop="isReturnedFinally"
        />
        <el-table-column label="是否有效" align="center" prop="validStatus" /> -->
        <el-table-column label="发货总数" align="center" prop="productNum" />

        <el-table-column
          label="发货数量(归还)"
          align="center"
          prop="shipmentQuantity"
        />

        <el-table-column
          label="发货数(不归还)"
          align="center"
          prop="undeliveredQuantity"
        />
        <el-table-column
          label="发货金额(不归还)"
          align="center"
          prop="undeliveredAmount"
        />
        <el-table-column
          label="退回数量"
          align="center"
          prop="returnedQuantity"
        />
        <el-table-column
          label="待退回数量"
          align="center"
          prop="quantityToBeReturned"
        >
          <template v-slot="scope">
            <span
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
                font-weight: bold;
              "
              @click="getdialogApply(scope.row, 'dept')"
              >{{ scope.row.quantityToBeReturned }}</span
            >
            <!-- @click="selectformisNew(scope.row, 50)" -->
          </template></el-table-column
        >
        <el-table-column
          label="待退回金额"
          align="center"
          prop="toBeReturnedAmount"
        />
        <el-table-column label="退货率" align="center" prop="returnRateStr" />
        <el-table-column
          label="总消耗金额"
          align="center"
          prop="consumeAmount"
        />
        <!-- <el-table-column label="月份" align="center" prop="monthly" />
        <el-table-column label="年" align="center" prop="appYear" /> -->
        <!-- <el-table-column label="年" align="center" prop="dataYear" />
        <el-table-column label="月" align="center" prop="dataMonth" /> -->
      </el-table>
      <pagination
        v-show="totalI > 0"
        :limit.sync="queryParamsI.thisPageSize"
        :page.sync="queryParamsI.pageNum"
        :total="totalI"
        @pagination="gettableDataI"
      ></pagination>
    </el-card>

    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> 部门明细详情</span>
        <span>
          <el-select v-model="queryParamsIII.appDept" @change="gettableDataIII">
            <el-option
              v-for="dict in DeptList"
              :key="dict"
              :label="dict"
              :value="dict"
            />
          </el-select>
          <el-radio-group
            v-model="queryParamsIII.dateType"
            size="small"
            style="margin-left: 5px"
          >
            <el-radio-button
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportIII"
            >导出</el-button
          >
        </span>
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade + " " }}年度完成率</span
                    > 
                  @pagination="getselectProductLevelAnalysis"
                  -->
      </div>
      <!-- <tableDataI :tableDataList="tableDataI" /> -->
      <el-table :height="400" :data="tableDataIII">
        <!-- <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" /> -->
        <!-- <el-table-column label="原始ID" align="center" prop="originalId" /> -->
        <el-table-column label="申请部门" align="center" prop="appDept" />

        <el-table-column label="发货总数" align="center" prop="productNum" />

        <el-table-column
          label="发货数量(归还)"
          align="center"
          prop="shipmentQuantity"
        />

        <el-table-column
          label="发货数(不归还)"
          align="center"
          prop="undeliveredQuantity"
        />
        <el-table-column
          label="发货金额(不归还)"
          align="center"
          prop="undeliveredAmount"
        />
        <el-table-column
          label="退回数量"
          align="center"
          prop="returnedQuantity"
        />
        <el-table-column
          label="待退回数量"
          align="center"
          prop="quantityToBeReturned"
        >
          <template v-slot="scope">
            <span
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
                font-weight: bold;
              "
              @click="getdialogApply(scope.row)"
              >{{ scope.row.quantityToBeReturned }}</span
            >
            <!-- @click="selectformisNew(scope.row, 50)" -->
          </template></el-table-column
        >
        <el-table-column
          label="待退回金额"
          align="center"
          prop="toBeReturnedAmount"
        />
        <el-table-column label="退货率" align="center" prop="returnRateStr" />
        <el-table-column
          label="总消耗金额"
          align="center"
          prop="consumeAmount"
        />
        <el-table-column label="月份" align="center" prop="monthly" />
        <el-table-column label="年" align="center" prop="appYear" />
        <!-- <el-table-column label="月" align="center" prop="dataMonth" /> -->
      </el-table>
      <pagination
        v-show="totalIII > 0"
        :limit.sync="queryParamsIII.thisPageSize"
        :page.sync="queryParamsIII.pageNum"
        :total="totalIII"
        @pagination="gettableDataIII"
      ></pagination>
    </el-card>

    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> 个人</span>
        <span>
          <el-form :inline="true" size="mini"
            ><el-form-item label="部门">
              <el-select
                v-model="queryParamsII.appDept"
                @change="gettableDataII"
              >
                <el-option
                  v-for="dict in DeptList"
                  :key="dict"
                  :label="dict"
                  :value="dict"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="申请人">
              <el-select
                v-model="queryParamsII.applicantId"
                @change="gettableDataII"
                clearable
              >
                <el-option
                  v-for="dict in ApplicantIdList"
                  :key="dict"
                  :label="dict"
                  :value="dict"
                />
              </el-select> </el-form-item
            ><el-form-item label="">
              <el-radio-group
                v-model="queryParamsII.dateType"
                size="small"
                style="margin-left: 5px"
              >
                <el-radio-button
                  v-for="(item, index) in typeAll"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-radio-button
                >
              </el-radio-group></el-form-item
            ><el-form-item label=""
              ><el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExportII"
                >导出</el-button
              ></el-form-item
            >
          </el-form>
        </span>
      </div>
      <!-- <tableDataII :tableDataList="tableDataII" /> -->
      <el-table :height="400" :data="tableDataII">
        <!-- <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" /> -->
        <el-table-column label="申请部门" align="center" prop="appDept" />
        <el-table-column label="申请人" align="center" prop="applicantId" />
        <el-table-column label="申请人昵称" align="center" prop="nickName" />
        <!-- <el-table-column label="申请日期" align="center" prop="appDate"> -->
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.appDate, '{y}-{m}-{d}') }}</span>
        </template> -->
        <!-- </el-table-column>
        <el-table-column label="是否归还" align="center" prop="isReturned" />
        <el-table-column
          label="最终是否归还"
          align="center"
          prop="isReturnedFinally"
        />
        <el-table-column label="是否有效" align="center" prop="validStatus" /> -->
        <el-table-column label="发货总数" align="center" prop="productNum" />

        <el-table-column
          width="120"
          label="发货数量(归还)"
          align="center"
          prop="shipmentQuantity"
        />

        <el-table-column
          width="120"
          label="发货数(不归还)"
          align="center"
          prop="undeliveredQuantity"
        />
        <el-table-column
          width="120"
          label="发货金额(不归还)"
          align="center"
          prop="undeliveredAmount"
        />
        <el-table-column
          label="退回数量"
          align="center"
          prop="returnedQuantity"
        />
        <el-table-column
          label="待退回数量"
          align="center"
          prop="quantityToBeReturned"
        >
          <template v-slot="scope">
            <span
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
                font-weight: bold;
              "
              @click="getdialogApply(scope.row)"
              >{{ scope.row.quantityToBeReturned }}</span
            >
            <!-- @click="selectformisNew(scope.row, 50)" -->
          </template></el-table-column
        >
        <el-table-column
          label="待退回金额"
          align="center"
          prop="toBeReturnedAmount"
        />
        <el-table-column label="退货率" align="center" prop="returnRateStr" />
        <el-table-column
          label="总消耗金额"
          align="center"
          prop="consumeAmount"
        />
        <el-table-column label="月份" align="center" prop="monthly" />

        <el-table-column label="年" align="center" prop="appYear" />
        <!-- <el-table-column label="月" align="center" prop="dataMonth" /> -->
      </el-table>
      <pagination
        v-show="totalII > 0"
        :limit.sync="queryParamsII.thisPageSize"
        :page.sync="queryParamsII.pageNum"
        :total="totalII"
        @pagination="gettableDataII"
      ></pagination>
    </el-card>

    <el-dialog
      :visible.sync="opendialogApply"
      width="1700px"
      append-to-body
      v-if="opendialogApply"
    >
      <dialogApply :row="row" />
    </el-dialog>
  </div>
</template>
<script>
import dialogApply from "@/views/sample/I/common/dialogApplyI.vue";
import date from "./common/date.vue";
import KoiCardIII from "./KoiCardIII";
import {
  selectDeptList,
  selectApplicantIdList,
} from "@/api/sample/OdsSampleTalentApplyReport";
import {
  selectDataList,
  selectDataAll,
} from "@/api/sample/OdsSampleTalentApplyFinancial";

import moment from "moment";
export default {
  components: {
    KoiCardIII,
    date,
    dialogApply,
  },
  data() {
    return {
      row: {},
      opendialogApply: false,
      //申请人列表
      ApplicantIdList: [],
      //部门列表
      DeptList: [],
      typeArr: [
        { value: "month", label: "按月" },
        { value: "year", label: "按年" },
        // { value: "近1年", label: "近1年" },
      ],
      typeAll: [
        { value: "", label: "所有" },
        { value: "month", label: "按月" },
        { value: "year", label: "按年" },
      ],
      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      // valueTime: moment(new Date().getTime()).format("YYYY-MM-DD"),

      groupType: "all",
      //时间控件
      timeObj: {},

      SaleProductdata: {},

      tableDataI: [], // 用于存储转换后的数据
      tableDataII: [], // 用于存储转换后的数据
      tableDataIII: [], // 用于存储转换后的数据

      rangeDate: [],
      queryParams: {},

      //部门
      queryParamsI: {
        groupType: "dept",
        pageNum: 1,
        thisPageSize: 10,
      },

      totalI: 0,
      pageReqI: {},
      //个人
      queryParamsII: {
        groupType: "applicant",
        dateType: "",
        appDept: "所有",
        pageNum: 1,
        thisPageSize: 10,
      },
      totalII: 0,
      pageReqII: {
        pageNum: 1,
        thisPageSize: 10,
      },

      //部门明细详情
      queryParamsIII: {
        groupType: "dept",
        dateType: "month",
        appDept: "所有",
        pageNum: 1,
        thisPageSize: 10,
      },

      totalIII: 0,
      pageReqIII: {
        pageNum: 1,
        thisPageSize: 10,
      },
    };
  },
  watch: {
    "queryParamsIII.dateType": {
      handler: function (newnew, oldold) {
        //部门明细详情
        this.gettableDataIII();
      },
    },
    "queryParamsII.dateType": {
      handler: function (newnew, oldold) {
        //个人
        this.gettableDataII();
      },
    },
  },
  created() {
    selectApplicantIdList().then((response) => {
      this.ApplicantIdList = response;
    });
    selectDeptList().then((response) => {
      response.push("所有");
      this.DeptList = response;
    });
  },
  methods: {
    getdialogApply(row, dept) {
      this.row = {
        pageNum: 1,
        thisPageSize: 10,
        startDate: this.timeObj.startTime,
        endDate: this.timeObj.endTime,
        applicantId: row.applicantId,
        appDept: row.appDept,
        appYear: row.appYear,
        appMonth: row.appMonth,
      };
      if (this.row.appDept && dept != "dept") {
        delete this.row.startDate;
        delete this.row.endDate;
      }
      this.opendialogApply = true;
    },
    //部门
    tEdit(row) {
      this.queryParamsIII = {
        ...this.queryParamsIII,
        appDept: row.appDept,
      };

      //部门明细详情
      this.gettableDataIII();

      this.queryParamsII = {
        ...this.queryParamsII,
        appDept: row.appDept,
      };

      //个人
      this.gettableDataII();
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      // if (!timeObj.endTime) {
      //   return;
      // }
      this.timeObj = timeObj;

      this.queryParamsI.startDate = this.timeObj.startTime;
      this.queryParamsI.endDate = this.timeObj.endTime;
      this.queryParamsII.startDate = this.timeObj.startTime;
      this.queryParamsII.endDate = this.timeObj.endTime;
      this.getList();
    },

    getList() {
      // if (this.rangeDate.length > 0) {
      this.queryParams = {
        startDate: this.timeObj.startTime,
        endDate: this.timeObj.endTime,
      };

      // this.queryParamsI = {
      //   startDate: this.timeObj.startTime,
      //   endDate: this.timeObj.endTime,
      //   ...this.queryParamsI,
      // };

      // }
      selectDataAll(this.queryParams).then((response) => {
        // this.SaleProductdata = response ? response : {};
        this.SaleProductdata = { ...response, ...this.queryParams };
      });
      //部门
      this.gettableDataI();
      //部门明细详情
      this.gettableDataIII();
      //个人
      this.gettableDataII();
    },

    //部门
    gettableDataI() {
      selectDataList(this.queryParamsI).then((response) => {
        // this.SaleProductdata = response ? response[0] : {};
        this.tableDataI = response.data;
        this.totalI = response.totalCount;
      });
    },
    //部门明细详情
    gettableDataIII() {
      selectDataList(this.queryParamsIII).then((response) => {
        // this.SaleProductdata = response ? response[0] : {};
        this.tableDataIII = response.data;
        this.totalIII = response.totalCount;
      });
    },
    //个人
    gettableDataII() {
      selectDataList(this.queryParamsII).then((response) => {
        // this.SaleProductdata = response ? response[0] : {};
        this.tableDataII = response.data;
        this.totalII = response.totalCount;
      });
    },
    handleExportI() {
      this.download(
        "product/OdsSampleTalentApplyFinancial/selectDataListExport",
        {
          ...this.queryParamsI,
        },
        `dept_${new Date().getTime()}.xlsx`
      );
    },
    handleExportII() {
      this.download(
        "product/OdsSampleTalentApplyFinancial/selectDataListExport",
        {
          ...this.queryParamsII,
        },
        `applicant_${new Date().getTime()}.xlsx`
      );
    },
    handleExportIII() {
      this.download(
        "product/OdsSampleTalentApplyFinancial/selectDataListExport",
        {
          ...this.queryParamsIII,
        },
        `dept_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
/** id */
private Long id;

/** 原始ID */
@Excel(name = "原始ID")
private Long originalId;

/** 申请部门 */
@Excel(name = "申请部门")
private String appDept;

/** 申请人 */
@Excel(name = "申请人")
private String applicantId;

/** 申请日期 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "申请日期", width = 30, dateFormat = "yyyy-MM-dd")
private Date appDate;

/** 是否归还 */
@Excel(name = "是否归还")
private String isReturned;

/** 最终是否归还 */
@Excel(name = "最终是否归还")
private String isReturnedFinally;

/** 是否有效 */
@Excel(name = "是否有效")
private String validStatus;

/** 发货数量 */
@Excel(name = "发货数量")
private Integer shipmentQuantity;

/** 退回数量 */
@Excel(name = "退回数量")
private Integer returnedQuantity;

/** 待退回数量 */
@Excel(name = "待退回数量")
private Integer quantityToBeReturned;

//退货率
private Double returnRate;
//月份
private String monthly;

/** 年 */
@Excel(name = "年")
private Integer appYear;

/** 月 */
@Excel(name = "月")
private Integer appMonth;

基础表id带回 申请部门/申请人/发货/退回/待退回/退货率